<template>
  <div id="zcfltj_bar" :style="{ width: '100%', height: '100%' }"></div>
</template>
<script>
// https://echarts.apache.org/examples/zh/editor.html?c=watermark 图表网址
import echarts from 'echarts'
let echartData = {}
export default {
  name: 'zcfltj_bar',
  props: ['barData'],
  data: function() {
    return {}
  },
  watch: {
    barData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      }
    }
  },
  mounted() {
    echartData = this.barData
    var myChart = echarts.init(document.getElementById('zcfltj_bar'))
    const option = {
      tooltip: {},
      title: [
        {
          //   text: '资产分类统计',
          subtext: '合计 ' + echartData.all,
          subtextStyle: {
            color: '#333'
          },
          left: '50%',
          textAlign: 'center'
        }
      ],
      grid: [
        {
          top: 50,
          height: '80%',
          width: '95%',
          left: 0,
          containLabel: true
        }
      ],
      xAxis: [
        {
          type: 'value',
          max: echartData.all,
          splitLine: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: 'category',
          data: Object.keys(echartData.charts),
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          type: 'bar',
          stack: 'chart',
          z: 3,
          barWidth: 20, // 柱子宽度
          itemStyle: {
            color: echartData.color
          },
          label: {
            position: 'right',
            color: '#333',
            show: true
          },
          data: Object.keys(echartData.charts).map(function(key) {
            return echartData.charts[key]
          })
        },
        {
          type: 'bar',
          stack: 'chart',
          silent: true,
          itemStyle: {
            color: '#efefef'
          },
          data: Object.keys(echartData.charts).map(function(key) {
            return echartData.all - echartData.charts[key]
          })
        }
      ]
    }
    myChart.setOption(option)
    window.addEventListener('resize', function() {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  }
}
</script>
<style lang="scss"></style>
